<template>
  <el-breadcrumb class="app-breadcrumb" separator=" "
                 style="height:61px;background-color:#ffffff;border-radius:0px;
                 padding:0;border-width:1px;border-style:solid;
                 border-color:rgb(255,255,255); display: flex; align-items: center;">

    <div
        style="display: flex; justify-content: space-between; align-items: center; width: 100%;"
    >
      <!-- 面包屑项容器，居中显示 -->
      <div style="flex-grow: 1; display: flex; justify-content: center; padding-left:8%;max-width: 100%">
        <el-breadcrumb-item
            v-for="(item, index) in levelList"
            :key="item.path"
            style="font-size: 17px; height: 55px;"
        >
          <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">
            {{ item.name }}
          </span>
        </el-breadcrumb-item>
      </div>

      <!-- 用户角色和功能框，靠右对齐 -->
      <div
          @mouseenter="showMenu = true"
          @mouseleave="showMenu = false"
          style="position: relative; color: #3a3a3a; margin-left: 5px; margin-right: 5px; padding-top: 2px; height: 55px; width: 10%; font-size: 17px; display: flex; align-items: center; justify-content: flex-start;"
      >
        <!-- 用户图标 -->
        <span
            style="display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: #ccb3f1; border-radius: 50%; margin-left: 5px; text-align: center; line-height: 30px;">
          <i class="el-icon-user" style="font-size: 16px; color: white;"></i>
        </span>
        <!-- 用户角色名称 -->
        <span style="margin-left: 5px;">{{ roleName }}</span>

        <!-- 功能框 -->
        <div
            v-if="showMenu"
            style="position: absolute; top: 50px; left: 0; width: 100px; height: 30px; background-color: white; border: 1px solid #ccc; border-radius: 10px; padding-block: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 1000;"
        >
          <div style="text-align: center; height: 30px; display: flex; align-items: center; justify-content: center;">
            <el-button type="text" @click="onLogout">退出登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-breadcrumb>
</template>


<script>
import pathToRegexp from 'path-to-regexp'
import storage from "@/utils/storage";
import hoverImage from "@/assets/img/logout-on.png"
import defaultImage from "@/assets/img/logout-default.png"

export default {
  data() {
    return {
      showMenu: false,

      isHovered: false,
      hoverImage,
      defaultImage,

      role: "",
      levelList: null,
      roleName: ''
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
    this.breadcrumbStyleChange()
    this.roleName = this.$storage.get("userName")
  },
  mounted() {
    if (this.$storage.get('Token')) {
      this.$http({
        url: "/get-role",
        method: "get",
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.role = data.data;
          if (this.role === "admin") {
            this.role = "管理员"
          } else if (this.role === "student") {
            this.role = "学生"
          } else if (this.role === "mentor") {
            this.role = "导师"
          }
          //此次data为role
        } else {
          this.$message.error(data.message || "获取角色失败,请登录");
        }
      }).catch(error => {
        this.$message.error(error);
      })
    }
  },

  methods: {
    onLogout() {
      let router = this.$router
      storage.clear()
      router.replace({
        name: "login"
      });
    },

    getBreadcrumb() {
      // only show routes with meta.title
      let route = this.$route
      let matched = route.matched.filter(item => item.meta)
      //const first = matched[0]
      matched = [{path: '/index'}].concat(matched)

      this.levelList = matched.filter(item => item.meta)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const {params} = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const {redirect, path} = item


      //判断是否重复

      if (!this.$route.path.includes(path)) {
        if (redirect) {
          this.$router.push(redirect)
          return
        }
        this.$router.push(path)
      }
    },
    //⭐
    breadcrumbStyleChange() {
      this.$nextTick(() => {
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el => {
          el.innerText = " "
          el.style.color = "rgb(68,68,68)"
        })
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el => {
          el.style.color = "rgb(94,94,94)"
        })
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el => {
          el.style.color = "rgb(68,68,68)"
        })

        let str = "vertical"
        if ("vertical" === str) {
          let headHeight = "60px"
          headHeight = parseInt(headHeight) + 10 + 'px'
          document.querySelectorAll('.app-breadcrumb').forEach(el => {
            el.style.marginTop = headHeight
          })
        }

      })
    },
  }
}
</script>

<style lang="scss" scoped>

.el-button {
  display: block; /* 按钮按列排放 */
  width: 100%; /* 按钮宽度填满父容器 */
}

.app-breadcrumb {
  margin-top: 0px !important;
  display: block;
  font-size: 14px;
  line-height: 50px;

  .box {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
  }

  .no-redirect {
    color: #505050;
    cursor: text;
  }
}
</style>
